<template>
  <div class="loginBox">
      <div class="warpBg" @click="closeBg"></div>
      <div class="info" v-if="loginStart">
        <p><input type="text" name="" v-model="name" placeholder="请输入用户账号"></p>
        <p><input type="password" @keyup.enter="clickLogin(name,password)" name="" v-model="password" placeholder="请输入用户密码"></p>
        <p>
          <button class="login" @click="clickLogin(name,password)">登录</button>
          <button class="close" @click="loginTab">立即注册</button>
        </p>
      </div>
      <div class="info" v-else>
        <p><input type="text" name="" v-model="regName" placeholder="请输入用户账号"></p>
        <p><input type="text" @keyup.enter="register" name="" v-model="regPassword" placeholder="请输入用户密码"></p>
        <p>
          <button class="login" @click="register">注册</button>
          <button class="close" @click="loginTab">立即登录</button>
        </p>
      </div>

  </div>
</template>

<script>

import axios from 'axios'
import {Login,Reg} from '@/config/api.js'
export default {
  name: 'hello',
  data () {
    return {
      loginStart:true,
      name: '',
      password:'',
      regName:'',
      regPassword:'',
      email:'',
      age:"",
      regInfo: {
          phone: ""
      }
    }
  },
  methods:{
    //切换登陆注册
    loginTab(){
      this.loginStart=!this.loginStart
    },
    //关闭登录窗口
    closeBg(){
      this.$emit('closeBg')
    },
    register(){
        //发送注册请求
        let name=this.regName
        let password=this.regPassword

        if(name!=''&&password!=''){
            var ling=this.$store.state.token;;
            var that=this;
            let date={
                "registered_method": "mobile",
                "mobile": name,
                "password": password
            };

            Reg('/users',date,ling).then(function(){
              alert('注册成功!');
              
              //自动登录
              that.clickLogin(that.regName,that.regPassword)

            }).catch(function(){
              alert('账号已存在!');
              that.regName=''
              that.regPassword=''
            })

        }else{
          alert('请输入账号密码！')
        }
     
    },
    //点击登录
    clickLogin(name,password){
      if(name!=''&&password!=''){

        let date={
            "grant_type": "password",
            "client_id": "game-ios",
            "client_secret": "0a0e2b7c0f223ff235810cbdc70f1d98",
            "scope": "game_ios",
            "username": name,
            "password": password
        };
        let that=this;

        Login(date).then(function(data){
          let token=data.data.data.access_token
          let arr = token.split('');
          let passToken = "";
          for(let i=0;i<token.length;i++){
            passToken += arr[i].charCodeAt()*3;
            passToken += "/";
          }
          let lastToken=passToken.substring(0,passToken.length-1)
          let d = new Date();
          d.setTime(d.getTime() + (604800000));
          let expires = "expires=" + d.toUTCString();
          document.cookie = "bedLogin" + "=" + lastToken + "; " + expires;
          document.cookie = "bedtoken" + "=" + lastToken + "; " + expires;
          that.$store.dispatch("loginsync");
          window.location.reload();
        }).catch(function(err){
          alert(err.response.data.message);
          that.name=''
          that.password=''
        })
      }else{
        alert('请输入账号密码！')
      }
      
    }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.input-box{position:absolute;top: 0;z-index: 9999;background: #fff}

.warpBg{width: 100vw;height: 100vh;background: rgba(0,0,0,0.8);position: fixed;z-index: 6;top:0;left: 0}
.info{width: 100%;position: fixed;z-index: 7;top: h(340);text-align: center;}
.info p{text-align: center;width: 100%;margin-bottom: h(20);}
.info input{width: h(580);height: h(90);border: #fff solid 2px;margin: auto;border-radius: h(8);padding:0 h(8);font-size: h(30)}
.info button{width: h(260);height: h(90);margin: 0 h(38);border-radius: h(8);border: none;font-size: h(36);color: #fff;margin-top: h(40)}
.info .close{background: #fd7b58}
.info .login{background: #38b6f0}
</style>
